<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="box" id="mybox"> <img class="myimg fill" src="https://placeimg.com/640/480/nature" alt="" > <div class="uncover"> <div class="uncover_slice"></div> <div class="uncover_slice"></div> <div class="uncover_slice"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var slices = [...document.querySelectorAll(".uncover_slice")]; var tl = new TimelineLite(); tl.staggerTo(".uncover_slice", 1, { height :"0px"}, 0.2 ); TweenMax.to(".myimg", 1, { scale: 1.2 } ); </script>

.box { height: 500px; width: 400px; background: black; position: relative; overflow: hidden; } img { height: 100%; width: 100%; } .uncover { display: flex; flex-direction: row; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .uncover_slice { height: 100%; flex-grow: 1; background: #000; }